<script setup>
import { ref, watch, computed ,reactive } from 'vue'
const count = ref(0)

const increment = () => {
  count.value++;
  state.count ++
}

const state = reactive({
  count: 0,
  message: 'Hello, Vue 3!'
});

// 监听 count 的变化
watch(count, (newValue, oldValue) => {
  console.log(`count 从 ${oldValue} 变为 ${newValue}`)
})

// 计算属性
const computer = computed(() => {
  return count.value * 2;
})
</script>

<template>
  <div>
    <button @click="increment">Increment Count</button>
    <p>Count is: {{ count }}</p>
    <p>Computer is: {{ computer }}</p>
    <p>{{ state }}</p>
  </div>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>
